<template>
	<view class="cate-container">
		<navBar :title="data.info.userName"></navBar>
		<view class="cate-content">
			<view class="cate-time">9月10日 11:17</view>
			<view class="content-card">
				<view class="card-title">
					<view class="title-left">视频剪辑师</view>
					<view class="title-right">4K-5K</view>
				</view>
				<view class="card-desc">有经验，会剪辑，会拍摄，对标就好</view>
				<view class="caed-border">
					<view class="border-item">单结</view>
					<view class="border-item">线上</view>
					<view class="border-item">短视频</view>
				</view>
				<view class="card-info">
					<view class="info-left">
						<image src="/static/img/common/user.jpg" mode=""></image>
						<text>宋女士·已认证</text>
					</view>
					<view class="info-right">2024-08-24</view>
				</view>
				<view class="card-time">8月23日 15:38 由你发起的沟通</view>
			</view>
			<!-- 聊天界面 -->
			<view class="content-mes">
				<view class="mes-item">
					
					您好！看了您的招聘信息，非常感兴趣
				</view>
				<view class="mes-item">明天过来上班了</view>
				<view class="mes-item"></view>
			</view>
			<!-- 发送 -->
			<view class="footer-main">
				<view class="footer-ipt"></view>
				<view class="footer-btn"></view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue'	
import { onLoad } from '@dcloudio/uni-app'
import navBar from '@/components/navBar.vue';
import timeSlot from "@/components/wanghexu-timeslot/wanghexu-timeslot.vue"
import areaSelect from '@/components/area-choose/area-choose.vue'
import api from '@/utils/api/recruit.js'
import { showToast } from '@/utils/toast.js'
onLoad(res=> {
	if(res.data){
		data.info = JSON.parse(res.data)
		console.log(data.info);
	}
})
const data = reactive({
	info: {}
})
</script>

<style lang="scss" scoped>
.cate-container{
	height: 100vh;
	.cate-content{
		padding: 0 24rpx;
		padding-top: 24rpx;
		box-sizing: border-box;
		.cate-time{
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: normal;
			font-size: 24rpx;
			color: #8C8C8C;
			line-height: 36rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}
		.content-card{
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			padding: 24rpx;
			box-sizing: border-box;
			.card-title{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.title-left{
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 36rpx;
					color: #262626;
					line-height: 54rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
				.title-right{
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 32rpx;
					color: #6B64D3;
					line-height: 48rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
			}
			.card-desc{
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: normal;
				font-size: 28rpx;
				color: #262626;
				line-height: 42rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				margin-top: 16rpx;
			}
			.card-border{
				margin-top: 16rpx;
				display: flex;
				align-items: center;
			}
		}
	}
}
</style>
